<template>
  <div>  
    <el-dialog
      title="编辑礼包规则"
      :visible.sync="visible" 
      width="40%" 
      :before-close="EditGiftRuleDialogClose"
    >  
     
      <el-form
        :model="giftRuleData"  
        :rules="gift_type_id==1?giftInfoBIFormRules:rights_giftInfoBIFormRules" 
        ref="giftRuleFormRef"
        label-width="150px"
      > 
        <el-form-item label="采购品类" prop="category">
            <el-select
            v-model="giftRuleData.category"
            placeholder="请选择采购品类"
            filterable
            clearable
            style="width:60%"
          >
            <el-option
              v-for="item in selectData.service_category"
              :key="item.id"
              :label="item.name" 
              :value="typeof giftRuleData.category=='string' ? item.id+'' :item.id"
            > <!--  :value="item.id"-->
            </el-option>
          </el-select> 
        </el-form-item>

        <el-form-item label="采购实体" prop="service_id">
          <el-select
            v-model="giftRuleData.service_id" 
            placeholder="请选择采购实体"
            filterable
            clearable
            style="width:60%"
          >
            <el-option
              v-for="item in selectData.get_service"
              :key="item.id"
              :label="item.name"
              :value="typeof giftRuleData.service_id=='string' ? item.id+'' :item.id"
              
            > <!--:value="item.id"-->
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购数量" prop="ticket_num">
          <div v-if="gift_type_id==1"> <!--1:服务礼包;权益礼包为1，不可修改-->
            <el-input
              v-model="giftRuleData.ticket_num"
              placeholder="请输入采购数量"
              style="width:60%"
            ></el-input>
          </div>
          <div v-else>
            <el-input
              disabled
              v-model="giftRuleData.ticket_num"
              placeholder="请输入采购数量"
              style="width:60%"
            ></el-input>
          </div>
          
        </el-form-item>
        <el-form-item v-show="gift_type_id==1" label="每个周期生成券数" prop="periodic_release_num" :required="gift_type_id==1?true:false">
          <el-input
            v-model="giftRuleData.periodic_release_num"
            placeholder="请输入每个周期生成的券数"
            style="width:60%"
          ></el-input>
        </el-form-item>

        <el-form-item v-show="gift_type_id==1" label="周期" prop="period" :required="gift_type_id==1?true:false" >
          <el-row style="width:60%">  
            <el-date-picker
              v-if="giftRuleData.period_unit=='exdate'" 
              v-model="giftRuleData.period"
              type="date" 
              value-format="yyyy-MM-dd"
              placeholder="请选择" 
              style="width:30%"  
            ></el-date-picker> 
            <el-input 
              v-else 
              v-model="giftRuleData.period"
              placeholder="请输入" 
              style="width:30%"  
            > 
            </el-input> 
            <el-select
              prop="period_unit"
              v-model="giftRuleData.period_unit"
              placeholder="请选择"
              style="width:30%" 
              required
              ><!--v-model="addForm.valid_unit"-->
              <el-option   
                v-for="item in selectData.period_unit" 
                :key="item.id"
                :label="item.name"
                :value="typeof giftRuleData.period_unit=='string' ? item.id+'' :item.id" 
              ></el-option> <!-- :value="item.id"-->
            </el-select>  
          </el-row> 
          
        </el-form-item>
          
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            v-model="giftRuleData.remark"
            placeholder="请输入备注"
            show-word-limit
            maxlength="500"
            style="width:60%"
          ></el-input>
        </el-form-item>
      </el-form> 
  
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelEditGiftRule">取 消</el-button>
        <el-button class="theme-background-color" @click="updateGiftRuleData"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
  
export default {
  props: {  
    gift_type_id:{
      type: [String,Number],
      default: function () {
        return {}
      }
    },
    editGRId:{
      type: [String,Number],
      default: function () {
        return {}
      }
    }, 
    openEditGiftRuleDialog: {
      type: Boolean,
      default: function () {
        return {}
      }
    }
  
  },
  
  data() {
    return {  
      visible:this.openEditGiftRuleDialog,
      selectData:{},
      
      giftRuleData:{  //礼包规则 
        category:'', 
        service_id: '',
        ticket_num: '', 
        periodic_release_num: '', 
        period: '',
        period_unit: '',
        remark:'' 
      }, 

      giftInfoBIFormRules: {  //数据校验：
        category: [{ required: true, message: '请选择采购品类', trigger: 'change' }],
        service_id: [{ required: true, message: '请选择采购实体', trigger: 'change' }],
        ticket_num: [{ required: true, message: '请输入采购数量', trigger: 'blur' }],
        periodic_release_num: [{ required: true, message: '请输入每个周期生成的券数', trigger: 'blur' }],
        period: [{ required: true, message: '请输入周期',  trigger: ['blur', 'change'] }],
        period_unit: [{ required: true, message: '请选择周期',  trigger: ['blur', 'change'] }], 
      },
     
      rights_giftInfoBIFormRules: {  //数据校验：
        category: [{ required: true, message: '请选择采购品类', trigger: 'change' }],
        service_id: [{ required: true, message: '请选择采购实体', trigger: 'change' }],
        ticket_num: [{ required: true, message: '请输入采购数量', trigger: 'blur' }], 
      },
      //gift_type_id:null
       
    }
  },
  created() {
    this.getSelectData()  //获取下拉列表的数据   
  },
 
  watch: { 
    giftRuleData: {
      handler(newValue, oldValue) {
        //  console.log('giftRuleData watch')
        // //  console.log(oldValue)   
        //  console.log(newValue)
         
         if(newValue.category!=oldValue.category||newValue.category!=''){   
          //  console.log("监听的newValue.category：")
          //  console.log(newValue.category)
           this.getSelectData(newValue.category)
         } 
 
      },
      deep: true
    },
   
    openEditGiftRuleDialog() { 
      this.visible = JSON.parse(JSON.stringify(this.openEditGiftRuleDialog))
      if (this.visible){  //显示获取编辑的信息
        this.getEditData()  
      }else{  //隐藏时
        this.$emit('reFill', true) 
      } 


    }
    
  },
  
  methods: {
    
   
    cancelEditGiftRule(){ 
      this.visible=false
      this.$emit('update:openEditGiftRuleDialog', false)
    },
    //礼包规则：编辑
    EditGiftRuleDialogClose(done){
      this.$confirm('确认关闭？')
        .then((_) => { 
          this.$refs.giftRuleFormRef.resetFields()
          this.visible=false
          this.$emit('update:openEditGiftRuleDialog', false)
          done()  
        })
        .catch((_) => {})
    }, 
    async updateGiftRuleData(){   //保存编辑后的礼包规则
      // console.log("编辑礼包规则：")

      const flag = this.validateForm() //const flag = this.$refs.giftRuleFormRef.validateForm()
      if (!flag) return
      this.getFinalData()//this.$refs.giftRuleFormRef.getFinalData()
      // console.log(this.giftRuleData)
 
      var postgrData={}
      if(this.gift_type_id==1){ //礼包类型：1服务礼包 
          postgrData.category=this.giftRuleData.category
          postgrData.service_id=this.giftRuleData.service_id
          postgrData.ticket_num=this.giftRuleData.ticket_num
          postgrData.periodic_release_num=this.giftRuleData.periodic_release_num
          postgrData.period=this.giftRuleData.period
          postgrData.period_unit=this.giftRuleData.period_unit
          postgrData.remark=this.giftRuleData.remark
          postgrData.id=this.giftRuleData.id
      }else{
          postgrData.category=this.giftRuleData.category
          postgrData.service_id=this.giftRuleData.service_id
          postgrData.ticket_num=this.giftRuleData.ticket_num
          postgrData.periodic_release_num=''
          postgrData.period=''
          postgrData.period_unit=''
          postgrData.remark=this.giftRuleData.remark
          postgrData.id=this.giftRuleData.id
      }
          
      // 向后端发起请求
      const { data: res } = await this.$http.post(
        '/admin/gift/editGiftRule',
        postgrData
      )
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.$message.success('成功编辑礼包规则')
      // this.getGiftDetail()
      // this.openEditGiftRuleDialog = false
      // this.$refs.giftRuleFormRef.resetAllData()

      this.visible = false
      this.$emit('update:openEditGiftRuleDialog', false)
 
    },
   

    async getEditData(){
        
      const { data: res } = await this.$http.post(
        '/admin/gift/getGiftRule',
        { id:this.editGRId }
      )
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }else{
        
        // this.giftRuleData=res.data 
        this.giftRuleData.id=res.data.id 
        
        this.giftRuleData.category=res.data.category.id//name
        this.giftRuleData.service_id=res.data.service_id
        this.giftRuleData.ticket_num=res.data.ticket_num
        this.giftRuleData.periodic_release_num=res.data.periodic_release_num
        this.giftRuleData.period=res.data.period
        this.giftRuleData.period_unit=res.data.period_unit.id
        this.giftRuleData.remark=res.data.remark 
     
         
      } 
    },
    async getSelectData(sid) {   //获取筛选条件数据：
      // console.log("获取筛选条件的id："+sid)
      var service_type='' 
      if(sid!=undefined){
        service_type=sid
      }
      const { data: res } = await this.$http.post('/admin/data/find', {
        code: 'service_category,get_service,period_unit',service_type:service_type 
      })
      // 返回结果
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.selectData = res.data

      if(this.gift_type_id!=1){
        this.selectData.service_category=[{id: 4, name: "服务卡"}, {id: 3, name: "兑换券"}]  
      } 
 
    }, 
  
    resetAllData() {
      // 清空校验 
      this.$refs.giftRuleFormRef.resetFields()
      this.giftRuleData = {}
    },
    validateForm() {
      let flag = false
      this.$refs.giftRuleFormRef.validate(async (valid) => {
        if (valid) {
          flag = true
        } else {
          flag = false
        }
      })
      return flag
    },
    getFinalData() { 
      // console.log("最终的礼包信息：");
      // console.log(this.giftRuleData);
   
      this.$emit('getGiftRule', this.giftRuleData) 
      
    },
   
  },
 
}
</script>

<style lang="less" scoped>
.el-card {
  margin-bottom: 10px;
}
/deep/.noBorder .el-input__inner {
  border: none;
} 
</style>
